import React, { Component } from 'react';
import '../styles/Sousujg.scss'
import { NavBar, Space ,SearchBar} from 'antd-mobile'
import { SearchOutline, MoreOutline } from 'antd-mobile-icons'
import * as service from '../api/index'

class Sousujg extends Component {
    constructor(props) {
        super(props)
        this.state = {
            right: (
                <div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <SearchOutline />
                        <MoreOutline />
                    </Space>
                </div>
            ),
            reshu:[]
        }
    }
    async componentDidMount(){
    var res=await service.user_reshu()
    this.setState({reshu:res.data})
    }
    render() {
        return (
            <div className='sousujg'>
                <NavBar  right={this.state.right} onBack={()=>{this.props.history.go(-1)}}>
                搜索结果
                </NavBar>
                <div className="shuru">
                <SearchBar placeholder='搜索课程/头条/活动' showCancelButton={() => true} />
                </div>
                <div className="reshu">
                    <div className="zi">热门搜索</div>
                    <div className="item">
                    {
                        this.state.reshu.map((item,index)=>{
                            return (
                               
                                    <span key={index}>{item.text}</span>
                             
                            )
                        })
                    }
                    </div>
                </div>
            </div>
        );
    }
}

export default Sousujg;